
<template>
	<view>
		<cu-custom :bgColor="'bg-blue'" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="cu-list menu-avatar" :class="'bg-'+theme.backgroundColor">
			<view class="padding-top-xs">
				<view class="flex padding-lr-lg">
					<view class="flex-treble flex" @click.stop="goPage('/pages/user/user-info/index')">
						<view class="cu-avatar round xl  flex solids"
							:style="userInfo.headimgUrl?'background-image:url(' + userInfo.headimgUrl + ')':''">
							{{ !userInfo.headimgUrl ? '头' : '' }}
						</view>
						<view class="content margin-left margin-top-sm">
							<view class="flex align-center">
								<view class="text-white text-bold text-xl" v-if="userInfo.nickName">
									{{ userInfo.nickName }}
								</view>
								<view class="margin-left-xl">
									<!--  #ifndef H5 -->
									<view>
										<image class="update-image"
											src="../../../static/public/img/user-center/update-image.png"></image>
									</view>
									<!--  #endif -->
									<!--  #ifdef  H5 -->
									<view @click.stop="updateUserInfo">
										<image class="update-image"
											src="../../../static/public/img/user-center/update-image.png"></image>
									</view>
									<!--  #endif -->
								</view>
							</view>
							<view class="text-white margin-top-xs" v-if="userInfo.phone">{{ userInfo.phone }}</view>
						</view>
					</view>
					
				</view>
				<view class="account cu-list menu card-menu margin-top-sm margin-bottom-xl">
					<view class="flex text-center text-white align-center margin-bottom" v-if="userInfo">
						<view class="flex flex-sub flex-direction">
							<view class="text-xl text-bold">{{ userInfo.userCode }}</view>
							
						</view>
						
						
					</view>
				</view>
				<!-- <image class="user-bg" src="http://minio.joolun.com/joolun/1/material/c73c49ba-9e7b-47de-bf95-c430fb6e1198.png"></image> -->
			</view>
		</view>
		
			
		<!-- 提示：实际功能为退出当前账号，因为苹果上架App Store必须要删除账号功能，所以将 退出登录 文字改为 删除账号  -->
		<view class="text-red bg-white  text-center margin-top margin-sm padding-sm radius" @click="logout">
			删除账号
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="margin-top flex justify-center text-sm" v-show="showPrivacyPolicy">
			<navigator class="text-blue text-sm" :url="'/pages/public/webview/webview?title=用户协议&url='+protocolUrl">
				{{ ' 用户协议 ' }}
			</navigator>
			和
			<navigator class="text-blue text-sm  "
				:url="'/pages/public/webview/webview?title=隐私政策&url='+privacyPolicyUrl">{{ ' 隐私政策' }}
			</navigator>
		</view>
		<!-- #endif -->
		<!-- <view class="text-gray text-sm text-center margin-sm">www.joolun.com提供技术支持（{{ version }}）</view> -->

	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from 'utils/util'
	import JimUtil from '@/utils/jim-util' // IM工具库
	import __config from '@/config/env'; // 配置文件Ω
	import packagejson from '@/package.json'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				userInfo: {},
				distributionConfig: null,
				orderCountAll: [],
				showPrivacyPolicy: __config.showPrivacyPolicy,
				privacyPolicyUrl: __config.privacyPolicyUrl,
				protocolUrl: __config.protocolUrl,
				canIUseGetUserProfile: false,
				version: packagejson.version,
				isWeiXinBrowser: util.isWeiXinBrowser()
			};
		},

		components: {},
		props: {},

		onShow() {
			app.initPage().then(res => {
				// this.userInfoGet();
				// this.orderCountAllFun();
			});
			
			// #ifdef MP-WEIXIN
			// app.doLogin()
			// #endif
		},

		onLoad(option) {
			// #ifdef MP-WEIXIN
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			// #endif
			// #ifdef H5
			let code = option.code;
			let state = option.state;
			//授权code获取用户信息
			if (code && state == 'snsapi_userinfo_update') { //有code
				this.userInfoUpdateByMp({
					jsCode: code,
					scope: state
				});
			}
			// #endif
		},

		methods: {
			goPage(path) {
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// #ifdef MP-WEIXIN
			agreeGetUser(e) {
				if (e.detail.errMsg == 'getUserInfo:ok') {
					api.userInfoUpdateByMa(e.detail).then(res => {
						this.userInfo = res.data;
						uni.setStorageSync('user_info', this.userInfo);
						this.userInfoGet();
					});
				}
			},

			getUserProfile(e) {
				// 该接口2022年10月25日后收回 https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (detail) => {
						api.userInfoUpdateByMa(detail).then(res => {
							this.userInfo = res.data;
							uni.setStorageSync('user_info', this.userInfo);
							this.userInfoGet();
						});
					}
				})
			},
			// #endif
			// #ifdef H5
			updateUserInfo() {
				if (util.isWeiXinBrowser()) {
					//微信公众号H5，页面授权获取用户详情信息
					let appId = app.globalData.appId;
					let pages = getCurrentPages();
					let currentPage = pages[pages.length - 1];
					let route = currentPage.route;
					let redirectUri = location.href;
					let componentAppId_str = app.globalData.componentAppId ? '&component_appid=' + app.globalData
						.componentAppId : '';
					redirectUri = encodeURIComponent(redirectUri);
					let wx_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId +
						'&redirect_uri=' + redirectUri + componentAppId_str +
						'&response_type=code&scope=snsapi_userinfo&state=snsapi_userinfo_update#wechat_redirect';
					location.href = wx_url;
				}
			},
			//通过微信公众号网页授权更新用户信息
			userInfoUpdateByMp(parm) {
				let that = this;
				api.userInfoUpdateByMp(parm).then(res => {
					//公众号h5网页授权时url会产生code、state参数，防止code、state被复制，需自动剔除
					let query = that.$Route.query;
					delete query.code;
					delete query.state;
					util.resetPageUrl(query);
					this.userInfo = res.data;
					uni.setStorageSync('user_info', this.userInfo);
					this.userInfoGet();
				}).catch(res => {

				});
			},
			// #endif
			//获取商城用户信息
			userInfoGet() {
				api.userInfoGet().then(res => {
					this.userInfo = res.data;
				});
				//分销设置
				api.distributionConfig().then(res => {
					this.distributionConfig = res.data
				});
			},

			orderCountAllFun() {
				api.orderCountAll().then(res => {
					this.orderCountAll = res.data;
				});
			},

			logout() {
				uni.showModal({
					content: '确定删除账号吗？',
					cancelText: '我再想想',
					confirmColor: '#ff0000',
					success(res) {
						if (res.confirm) {
							api.logout().then(res => {
								let userInfo = res.data;
								uni.setStorageSync('user_info', userInfo);
								if (userInfo) {
									uni.setStorageSync('third_session', userInfo.thirdSession);
								}
								//登出IM
								JimUtil.IMloginOut()
								//退出登录完成跳到首页
								uni.reLaunch({
									url: '/pages/home/index'
								});
								//清空购物车数量
								uni.setTabBarBadge({
									index: 3,
									text: '0'
								});
							});
						}
					}
				});
			}

		}
	};
</script>
<style>
	.user-bg {
		position: absolute;
		top: 180rpx;
		right: 30rpx;
		width: 248rpx;
		height: 248rpx;
		opacity: 0.2;
	}

	.item-img {
		width: 60rpx;
		height: 60rpx;
	}

	.update-image {
		width: 30rpx;
		height: 30rpx;
	}

	.signrecord {
		width: 140rpx;
		height: 52rpx;
	}

	.distribution-bg {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #3b363a;
	}

	.distribution-image {
		width: 80rpx;
		height: 80rpx;
	}

	.distribution-center {
		border-radius: 20px;
		padding: 6rpx 16rpx;
		background-image: linear-gradient(to right, #faead0, #e9b59a);
		color: #42494d;
	}

	.activity-image {
		width: 100%;
		height: 130rpx;
		background-size: 100% 130rpx;
	}
</style>